<style lang="stylus" rel="stylesheet/stylus" src="./playleave.styl"></style>
<template>
	<div class="playlogin realTimeDataClass accQuery" :style="{width:pageWidth}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				<span class="title1">当前位置/游戏分析/玩家分析/</span>
				<span>{{title}}</span>
			</div>
			<div class="right_header_time">
				<div class="block">
					<span>选择日期范围：</span>
					<el-date-picker
						size='small'
						v-model="date"
						type="daterange"
						align="left"
						placeholder="选择日期范围"
						@change='dateChange'
						:picker-options="pickerOptions"></el-date-picker>
				</div>
			</div>
			<div class="choose_plat">
				<el-menu :theme="this.$store.getters.theme[4]"  class="el-menu-demo" mode="horizontal" @select="handleSelect">
					<el-menu-item index="0" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>全平台</el-menu-item>
					<el-menu-item index="3" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>安卓</el-menu-item>
					<el-menu-item index="2" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>iOS</el-menu-item>
					<el-menu-item index="9" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>通用</el-menu-item>
					<el-menu-item index="4" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>高级筛选</el-menu-item>
				</el-menu>
			</div>
		</div>
		<div class="right_content">
			<div class="listChart1">
				<div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
					<p class='zoomIn animated'>用户数据</p>
					<div class="chart1-introduce">
						<el-popover
			              ref="listChart1_popo"
			              placement="top-start"
			              title="用户数据"
			              width="200"
			              trigger="hover"
			              content="用户数据"></el-popover> <i class="el-icon-information" v-popover:listChart1_popo></i>
					</div>
					<el-button type="primary" size="mini" class="excel"  @click="excel('','玩家分析-流失分析-用户数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i>
						导出excel
					</el-button>
				</div>
				<div class="realTimeServiceTableBody">
					<template>
						<el-table
		              :data="tableData"
		              border
		              :default-sort = "{prop: 'time', order: 'descending'}" @sort-change='sortChange'
		              >
							<el-table-column sortable align="center" 
		                  v-for="col in tableHeader" :key="col.label"
		                  :prop="col.prop" :label="col.label" :width='col.width'></el-table-column>
						</el-table>
					</template>
				</div>
				<div class="block realTimeServicePage">
					<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="dataTotal"></el-pagination>
				</div>
			</div>
			<div class="listChart2">
				<div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
					<p class='zoomIn animated'>用户指标</p>
					<div class="chart1-introduce">
						<el-popover
		              ref="listChart1_popo"
		              placement="top-start"
		              title="用户指标"
		              width="200"
		              trigger="hover">用户指标图表包括新增用户数，登录比有效用户数，登录比留存用户数</el-popover>
						<i class="el-icon-information" v-popover:listChart1_popo></i>
					</div>
				</div>
				<div class="realTimeData" id='realTimeData'></div>
			</div>
		</div>
		<v-advance ref="advance" :channels='channels' :servers="servers" @get="getData" :post-obj='postObj'></v-advance>
		<a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a>
	</div>
</template>
<script src="./playleave.js"></script>